<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="backpage">返回</el-button>
    </div>
    <div class="searchlist">
      <div class="item">
        <div class="name">合同号</div>
        <el-input style="width:300px;" v-model="code"></el-input>
      </div>
      <div class="item">
        <div class="name">合同签订日期</div>
        <el-date-picker
          v-model="contract_signTime"
          type="date"
          style="width:300px;"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div class="item">
        <div class="name">合同名称</div>
        <el-input style="width:300px;" v-model="name"></el-input>
      </div>
      <div class="item">
        <div class="name">合同类型</div>
        <el-select v-model="contract_type" style="width:300px;" placeholder="请选择">
          <el-option
            v-for="item in contractType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="name">投放周期</div>
        <el-date-picker
          style="width:300px"
          v-model="contract_priod"
          @change="contract_priodChange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div class="item">
        <div class="name">合同额</div>
        <el-input style="width:100px;" v-model="contract_money"></el-input>
        <div style="margin-left:5px;">万元</div>
      </div>
      <!-- <div class="item">
        <div class="name">销售方案</div>
        <el-input style="width:200px;"></el-input>
        
        <el-button class="click" style="margin-left:5px;" type="text">点击选择</el-button>
      </div>-->
      <div class="item">
        <div class="name">销售人员</div>
        <el-input disabled style="width:200px;" v-model="sale.name"></el-input>
        <!-- <div class="click" style="margin-left:5px;" @click="setmarket">点击选择</div> -->
        <el-button class="click" style="margin-left:5px;" type="text" @click="setmarket">点击选择</el-button>
      </div>
      <div class="item">
        <div class="name">代理商</div>
        <el-input disabled style="width:200px;" v-model="Agent.name"></el-input>
        <!-- <div class="click" style="margin-left:5px;" @click="setDLS">点击选择</div> -->
        <el-button
          class="click"
          type="text"
          style="margin-left:5px;"
          :disabled="isCheckSalesMan"
          @click="setDLS"
        >点击选择</el-button>
      </div>
      <div class="item">
        <div class="name">广告主</div>
        <el-input disabled style="width:200px;" v-model="advertisers.name"></el-input>
        <!-- <div class="click" style="margin-left:5px;" @click="setGGZ">点击选择</div> -->
        <el-button
          class="click"
          type="text"
          style="margin-left:5px;"
          :disabled="isCheckSalesMan"
          @click="setGGZ"
        >点击选择</el-button>
      </div>
      <div class="item">
        <div class="name">行业</div>
        <el-select v-model="industry_id" style="width:300px;" placeholder="请选择">
          <el-option
            v-for="item in advertisersTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="name">关联账户</div>
        <el-select v-model="contact_num" style="width:300px;" placeholder="请选择">
          <el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="item">
        <div class="name">品牌</div>
        <el-select v-model="band" style="width:300px;" placeholder="请选择">
          <el-option v-for="item in bandList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <div class="require">
        <div class="name">投放要求</div>
        <el-input type="textarea" v-model="note" style="width:70%;" :rows="2" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="listitem">
      <div class="headertitles">
        <div>媒体资源</div>
        <div class="adds" @click="setselectresource('open')">加入资源</div>
      </div>
      <resource-List
        :tableData="tableDataRont.resourceListData"
        @handleResourceDelete="handleResourceDelete"
        @handleResourceChange="handleResourceChange"
      ></resource-List>
    </div>
    <div class="listitem">
      <div class="headertitles">
        <div>产品</div>
        <div class="adds" @click="setproduct">加入产品</div>
      </div>
      <product-list :tableData="resourceDataList"></product-list>
    </div>
    <div class="listitem">
      <div class="headertitles">
        <div>合同款项</div>
        <div class="adds" @click="setgetmoney">添加付款计划</div>
        <div class="adds" @click="setrefund('open')">添加退款</div>
      </div>
      <money-List
        @handleMoneyListDelete="handleMoneyListDelete"
        @handleMoneyListChange="handleMoneyListChange"
        :tableData="tableDataRont.moneyListData"
      ></money-List>
    </div>
    <add-Money
      v-if="showMoney"
      @edit="editMoney"
      :type="moneyType"
      @moneyAdd="moneyAdd"
      @closeMoney="setgetmoney"
    ></add-Money>
    <div
      class="otherfile"
      style="flex-flow:column;width:98%;align-items:flex-start;padding:10px 0; height:auto;"
    >
      <div class="filename">相关附件（合同/补充协议）</div>
      <div>
        <el-upload
          class="upload-demo"
          :on-success="uploadSuccess"
          action="http://dev.media.xkphp.com/api/upload"
          multiple
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
    </div>
    <div class="otherfile">
      <div class="filename" style="width:100px;">状态</div>
      <el-radio v-model="radio" label="1">草稿</el-radio>
      <el-radio v-model="radio" label="2">提交</el-radio>
    </div>
    <div class="btom">
      <el-button type="primary" @click="addNewContract">保存</el-button>
      <!-- <el-button type="primary">删除</el-button>
      <el-button type="primary" @click.native="settermination">终止合同</el-button>
      <el-button type="primary" @click.native="setpause">暂停合同</el-button>-->
      <el-button type="primary" @click="back">返回</el-button>
    </div>
    <!-- market\ -->
    <div class="prop" v-if="market">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:50%;">
        <div class="propheader">
          选择销售
          <!-- <p class="close1" @click="setmarket">关闭</p> -->
          <el-button type="text" class="close1" @click="setmarket">关闭</el-button>
        </div>
        <div class="info">
          <div class="topinfo">
            <p>关键字</p>
            <el-input v-model="S_name" style="width:200px;"></el-input>
          </div>
          <div class="topinfo">
            <el-button type="primary" @click.native="seachSalesman" style="margin-left:30px;">搜索</el-button>
          </div>
        </div>
        <div class="listtab">
          <el-table
            :data="SalesmanPeople"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column prop="get_admin_info.name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="get_admin_info.mobile" label="电话" align="center"></el-table-column>
            <el-table-column prop="get_admin_info.email" align="center" label="邮箱"></el-table-column>
            <el-table-column prop="get_admin_info.door_name" align="center" label="部门"></el-table-column>

            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="saleChoose(scope.row)"
                  type="text"
                  size="small"
                >{{sale.id == scope.row.id?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleSalesmanPageChange"
            :current-page.sync="SalesmanPage"
            :page-size="4"
            layout="prev, pager, next, jumper"
            :total="SalesmanTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="prop" v-if="DLS">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:55%;">
        <div class="propheader">
          选择代理商
          <!-- <p class="close1" @click="setDLS">关闭</p> -->
          <el-button type="text" class="close1" @click="setDLS">关闭</el-button>
        </div>
        <div class="info">
          <div class="topinfo">
            <p>关键字</p>
            <el-input v-model="A_name"></el-input>
          </div>
          <div class="topinfo">
            <el-button type="primary" @click.native="seachAgen" style="margin-left:30px;">搜索</el-button>
            <el-button type="primary" style="margin-left:30px;" @click.native="newAddAgent">新建</el-button>
          </div>
        </div>
        <div class="listtab" style="width:95%;">
          <el-table
            :data="AgentList"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column prop="city" label="城市" align="center"></el-table-column>
            <el-table-column prop="name" label="代理商" align="center"></el-table-column>
            <el-table-column prop="contact" align="center" label="联系人"></el-table-column>
            <el-table-column prop="mobile" align="center" label="电话"></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建日期"></el-table-column>
            <el-table-column label="操作" align="center" width="60">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="Agentchoose(scope.row)"
                  type="text"
                  size="small"
                >{{scope.row.id==Agent.id?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleAgenpageChange"
            :current-page.sync="Agenpage"
            :page-size="4"
            layout="prev, pager, next, jumper"
            :total="Agentotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="prop" v-if="GGZ">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          选择广告主
          <p class="close1" @click="setGGZ">关闭</p>
        </div>
        <div class="info">
          <div class="topinfo">
            <p>关键字</p>
            <el-input v-model="ad_name"></el-input>
          </div>
          <div class="topinfo">
            <el-button type="primary" style="margin-left:30px;" @click.native="seachAd">搜索</el-button>
            <el-button type="primary" style="margin-left:30px;" @click.native="changeAddStatus">新建</el-button>
          </div>
        </div>
        <div class="listtab" style="width:550px;">
          <el-table
            :data="advertisersList"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            style="width: 100%"
            max-height="250"
          >
            <el-table-column prop="city" label="城市" align="center"></el-table-column>
            <el-table-column prop="name" label="代理商" align="center"></el-table-column>
            <el-table-column prop="contact" align="center" label="联系人"></el-table-column>
            <el-table-column prop="mobile" align="center" label="电话"></el-table-column>
            <el-table-column prop="created_at" align="center" label="创建日期"></el-table-column>
            <el-table-column label="操作" align="center" width="60">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="advertisersChoose(scope.row)"
                  type="text"
                  size="small"
                >{{scope.row.id==advertisers.id?'取消选择':'选择'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleAgenpageChange"
            :current-page.sync="advertisersPage"
            :page-size="4"
            layout="prev, pager, next, jumper"
            :total="advertisersTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <add-resource
      :meijieData="MEIJIE"
      @closeAddSource="closeAddSource"
      @editClick="editClick"
      :type="toAddResource"
      @addClick="addClick"
      v-if="showAddSource"
    ></add-resource>
    <div class="prop propd" v-show="product">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop1">
        <div class="propheader">
          选择组合产品
          <p class="close1" @click="setproduct">关闭</p>
        </div>
        <div class="info1">
          <div class="inputitem">
            <p class="inputname">播出日期</p>
            <el-date-picker
              style="width:300px"
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <div class="inputitem">
            <p class="inputname">一级分类</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">二级分类</p>
            <el-select v-model="value" style="width:300px" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="inputitem">
            <p class="inputname">关键字</p>
            <el-input style="width:300px;"></el-input>
          </div>
          <div class="inputitem">
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
        <div class="tabslist">
          <el-table
            ref="multipleTable"
            :cell-style="$rowstyle"
            :header-cell-style="$headerstyle"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="方案编号"></el-table-column>
            <el-table-column prop="name" label="方案名称"></el-table-column>
            <el-table-column prop="address" label="有效日期"></el-table-column>
            <el-table-column prop="name" label="一级分类"></el-table-column>
            <el-table-column prop="name" label="二级分类"></el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="11"
              layout="prev, pager, next, jumper"
              :total="10"
            ></el-pagination>
          </div>
          <div class="inputitem" style="display:flex;align-items: center;">
            <p class="inputname" style="width:80px;">备注</p>
            <el-input style="width:300px;"></el-input>
          </div>
        </div>

        <div class="saves">
          <el-button type="primary">加入</el-button>
        </div>
      </div>
    </div>

    <div class="prop" v-if="pause">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:500px;height:410px;">
        <div class="propheader">
          暂停合同
          <p class="close1" @click="setpause">关闭</p>
        </div>
        <div class="getmoney">
          <div class="topinfo">
            <p>暂停时间</p>
            <el-date-picker
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>

          <div class="topinfo" style="margin-top:20px;">
            <p>暂停说明</p>
            <el-input type="textarea" :rows="2" placeholder="请输入内容"></el-input>
          </div>
          <div class="topinfo" style="height:100px;">
            <p style="width:90px;">附件</p>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="3"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <div class="addsave1">
            <el-button type="primary" style="margin:0 auto;">确认</el-button>
            <el-button type="primary" style="margin:0 auto;">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="prop" v-if="refund">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:500px;height:auto;">
        <div class="propheader">
          添加退款
          <p class="close1" @click="setrefund">关闭</p>
        </div>
        <div class="getmoney">
          <div class="topinfo">
            <p>退款日期</p>
            <el-date-picker
              type="date"
              style="width:200px;"
              v-model="refundTypeList.time"
              placeholder="选择日期"
            ></el-date-picker>
          </div>
          <div class="topinfo">
            <p>退款类型</p>
            <el-select style="width:200px;" v-model="refundTypeList.type" placeholder="请选择">
              <el-option
                v-for="item in refundTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="topinfo">
            <p>退款金额</p>
            <el-input style="width:150px;" v-model="refundTypeList.money"></el-input>
            <p style="margin-left:5px;">万元</p>
          </div>
          <div class="topinfo">
            <p>说 明</p>
            <el-input type="textarea" :rows="2" v-model="refundTypeList.mark" placeholder="请输入内容"></el-input>
          </div>
          <div class="topinfo" style="height:100px;">
            <p style="width:90px;">附件</p>
            <el-upload
              class="upload-demo"
              action="http://dev.media.xkphp.com/api/upload"
              multiple
              :on-success="refundSuccess"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <div class="addsave">
            <el-button type="primary" style="margin:0 auto;" @click="addRefund">添加</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="prop" v-if="termination">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop" style="width:500px;height:360px;">
        <div class="propheader">
          终止合同
          <p class="close1" @click="settermination">关闭</p>
        </div>
        <div class="getmoney">
          <div class="topinfo" style="margin-top:20px;">
            <p>终止说明</p>
            <el-input type="textarea" :rows="2" placeholder="请输入内容"></el-input>
          </div>
          <div class="topinfo" style="height:100px;">
            <p style="width:90px;">附件</p>
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              multiple
              :limit="3"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
          <div class="addsave1">
            <el-button type="primary" style="margin:0 auto;">确认</el-button>
            <el-button type="primary" style="margin:0 auto;">取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <add-Ader v-if="showAdd" :sale_id="sale.id" @closeAdd="changeAddStatus"></add-Ader>
    <add-Agent v-if="showAddAgent" @closeAddAgent="changeAddAgentStatus" :sale_id="sale.id"></add-Agent>
  </div>
</template>
<script>
import {
  Choice_Salesman,
  Choice_Agent,
  Choice_advertisers,
  addvertise_type,
  getmediaINFO,
  getChannel,
  getAccount,
  getBand,
  GET_CONTRACT_BACK_MONEY,
  addContract,
  checkContract
} from "../../api/Salesman.js";
import { SETDATE } from "../../api/System.js";
// import dataSource from "./motheds.js";
import addAder from "../market_manage/components/addAder.vue";
import addAgent from "../market_manage/components/addAgent.vue";
import resourceList from "./components/resourceList.vue";
import productList from "./components/productList.vue";
import moneyList from "./components/moneyList.vue";
import addResource from "./components/addResource.vue";
import addMoney from "./components/addMoney.vue";
import formatEveryDay from "./components/timeFormat.js";
import moment from "moment";
export default {
  components: {
    addAder,
    addAgent,
    resourceList,
    productList,
    moneyList,
    addResource,
    addMoney
  },
  data() {
    return {
      //合同号
      code: "",
      // 合同签订日期
      contract_signTime: "",
      //合同名称
      name: "",
      //合同类型
      industry_id: "",
      //投放周期
      contract_type: "",
      contract_priod: "",
      //合同额
      contract_money: "",
      //选中的销售的id
      sale: { id: "" },
      // 是否选择销售人员
      isCheckSalesMan: true,
      resourceDataList: [],

      //选中的代理商
      Agent: {},
      advertisers: {},
      getmoney: false,
      pause: false,
      GGZ: false,
      DLS: false,
      product: false,
      refund: false,
      //选择资源
      selectresource: false,
      //选择销售弹框
      market: false,
      radio: "1",
      time: "",
      value1: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      contractType: [
        {
          value: 1,
          label: "商业广告"
        },
        {
          value: 2,
          label: "公益广告"
        }
      ],
      termination: false,
      value: "",
      tableData: [],
      //销售人员列表
      SalesmanPeople: [],
      SalesmanPage: 1,
      SalesmanTotal: 0,
      S_name: "",
      Salesmanname: "",
      //代理商列表
      AgentList: [],
      Agenpage: 1,
      Agentotal: 0,
      A_name: "",
      Agenname: "",

      // 广告主列表
      advertisersList: [],
      advertisersPage: 1,
      advertisersTotal: 0,
      ad_name: "",
      adname: "",
      advertisersTypeList: [],

      showAdd: false,
      showAddAgent: false,
      resource: {
        playtime: [],
        meidum: "",
        channel: "",
        show: "",
        resource: "",
        rate: [],
        sourceType: [],
        otherTime: "",
        coast: "",
        agentCoast: "",
        mark: ""
      },
      MEIJIE: [],
      channelList: [],
      accountList: [],
      contact_num: "",
      bandList: [],
      band: "",
      showAddSource: false,
      tableDataRont: {
        resourceListData: [],
        moneyListData: []
      },
      toAddResource: null,
      showMoney: false,
      moneyType: null,
      note: "",
      fileList: [],
      priod: [],
      refundFileList: [],
      refundTypeList: {
        time: "",
        type: "",
        money: "",
        mark: "",
        fileList: ""
      },
      refundTypeData: [],
      refundParams: ""
    };
  },
  created() {
    
    if (this.$route.query.type == 2) {
      this.isCheckContract()
    }
    this.getChoice_Salesman();
    this.getAddType();
    this.getAccountList();
    this.getBandList();
  },
  computed:{
    computedSaleId(){
      return this.sale.id
    }
  },
  watch:{
    computedSaleId(val, oldVal){
        this.getChoice_advertisers(val);
        this.getChoice_Agent(val);
    }
  },
  methods: {
    getNameById(id,arr){
      let obj=arr.find(function (x) {
		    return x.id == id
      })
      return obj
    },
    // 查看
    isCheckContract(){
      checkContract({
        id:this.$route.query.id
      }).then(res=>{
        if (res.code == 200) {
          let data = res.data
          this.code = data.code
          this.contract_signTime = moment(unix(Number(data.date))).format('YYYY-MM-DD')
          this.name = data.name
          this.contract_type = data.type
          this.contract_priod = [moment(unix(JSON.parse(data.cycle).start_time)).format('YYYY-MM-DD'),moment(unix(JSON.parse(data.cycle).end_time)).format('YYYY-MM-DD')]
          this.contract_money = data.money
          if (this.getNameById(data.sale_id,this.SalesmanPeople)) {
            this.sale = this.getNameById(data.sale_id,this.SalesmanPeople)
            let params = {
              name:this.sale.name,
              page:1,
              per:4
            }
            this.getChoice_advertisers(params)
          }else{
            this.sale.name = '未获得该合同销售人员'
          }
          if (this.getNameById(data.agent_id,this.AgentList)) {
            this.Agent = this.getNameById(data.agent_id,this.AgentList)
          }else{
            this.Agent.name = '未获得该合同代理商信息'
          }

          if (this.getNameById(data.media_up_id,this.advertisersList)) {
            this.advertisers = this.getNameById(data.media_up_id,this.advertisersList)
          }else{
            this.advertisers.name = '未获得该合同广告主信息'
          }
          this.industry_id = data.industry_id
        }else{
          this.$message.error('获取合同信息失败！')
          this.$router.back()
        }
      })
    },
    contract_priodChange(e) {
      this.priod = e;
    },
    addRefund() {
      if (this.refundTypeList.time == "") {
        this.$message.error("请选择时间");
      } else if (this.refundTypeList.type == "") {
        this.$message.error("请选择类型");
      } else if (this.refundTypeList.type == "") {
        this.$message.error("请填写金额");
      } else {
        this.$confirm("是否添加退款消息?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.refundParams = { ...this.refundTypeList };
            this.$message({
              type: "success",
              message: "已添加!"
            });
            this.setrefund();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      }
    },
    advertisersChoose(row) {
      if (this.advertisers.id == row.id) {
        this.advertisers = {};
      } else {
        this.advertisers = row;
      }
      this.setGGZ();
    },
    uploadSuccess(response, file, fileList) {
      let arr = [];
      fileList.forEach(element => {
        arr.push(element.response.data.path);
      });
      this.fileList = arr;
    },
    addClick(e) {
      this.closeAddSource();
      let arr = [...this.tableDataRont.resourceListData.concat(e)];
      this.$set(this.tableDataRont, "resourceListData", arr);
    },
    editClick(e) {
      this.closeAddSource();
      let index = "";
      this.tableDataRont.resourceListData.forEach((element, i) => {
        if (element.id == e.id) {
          index = i;
        }
      });
      this.tableDataRont.resourceListData[index] = { ...e };
      let arr = [...this.tableDataRont.resourceListData];

      this.$set(this.tableDataRont, "resourceListData", arr);
    },
    handleResourceDelete(e) {
      let index = "";
      this.tableDataRont.resourceListData.forEach((element, i) => {
        if (element.id == e.id) {
          index = i;
        }
      });
      this.tableDataRont.resourceListData.splice(index, 1);
      let arr = [...this.tableDataRont.resourceListData];

      this.$set(this.tableDataRont, "resourceListData", arr);
    },
    handleResourceChange(e) {
      e.playtime = e.playTimeOrange;
      this.toAddResource = e;

      this.showAddSource = true;
    },

    handleMoneyListDelete(e) {
      let index = "";
      this.tableDataRont.moneyListData.forEach((element, i) => {
        if (element.id == e.id) {
          index = i;
        }
      });
      this.tableDataRont.moneyListData.splice(index, 1);
      let arr = [...this.tableDataRont.moneyListData];
      this.$set(this.tableDataRont, "moneyListData", arr);
    },
    handleMoneyListChange(e) {
      this.setgetmoney();
      this.moneyType = e;
    },
    isRepeat(oldArr, newObj, name) {
      let a = false;
      oldArr.forEach((e, i) => {
        if (e[name] == newObj[name]) {
          return (a = true);
        }
      });
      return a;
    },
    moneyAdd(e) {
      if (!this.isRepeat(this.tableDataRont.moneyListData, e, "id")) {
        this.moneyType = null;
        this.closeSetMoney();
        let arr = [...this.tableDataRont.moneyListData.concat(e)];
        this.$set(this.tableDataRont, "moneyListData", arr);
      } else {
        this.$message.error("已有同种付款计划,请调整");
      }
    },
    editMoney(e) {
      if (!this.isRepeat(this.tableDataRont.moneyListData, e, "id")) {
        let index = "";
        this.closeSetMoney();
        this.tableDataRont.moneyListData.forEach((element, i) => {
          if (element.uid == e.uid) {
            index = i;
          }
        });
        this.tableDataRont.moneyListData[index] = { ...e };
        let arr = [...this.tableDataRont.moneyListData];

        this.$set(this.tableDataRont, "moneyListData", arr);
      } else {
        this.$message.error("已有同种付款计划,请调整");
      }
    },
    changeAddStatus() {
      this.showAdd = !this.showAdd;
      this.getChoice_advertisers(this.sale.id);
    },
    changeAddAgentStatus() {
      this.showAddAgent = !this.showAddAgent;
      this.getChoice_Agent(this.sale.id);
    },
    newAddAgent() {
      this.showAddAgent = true;
    },

    // 广告主行业
    getAddType() {
      let data = {
        type: 1
      };
      addvertise_type(data).then(res => {
        if (res.code == 200) {
          this.advertisersTypeList = res.data;

          this.advertisersTypeList.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });
        }
      });
    },
    getAccountList() {
      let data = {};
      getAccount(data).then(res => {
        if (res.code == 200) {
          this.accountList = res.data;

          this.accountList.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });
        }
      });
    },
    getBandList() {
      let data = {};
      getBand(data).then(res => {
        if (res.code == 200) {
          this.bandList = res.data;

          this.bandList.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });
        }
      });
    },
    //点击选择代理商
    Agentchoose(row) {
      if (this.Agent.id == row.id) {
        this.Agent = {};
      } else {
        this.Agent = row;
      }
      this.setDLS();
    },
    //点击选择销售人员
    saleChoose(row) {
      if (this.sale.id == row.id) {
        this.isCheckSalesMan = true;
        this.sale = {};
      } else {
        this.isCheckSalesMan = false;
        this.sale = row.get_admin_info;
        // this.getChoice_advertisers(row.id);
        // this.getChoice_Agent(row.id);
      }
      console.log(row.id);
      this.setmarket();
    },
    //销售人员页数变化
    handleSalesmanPageChange(e) {
      this.SalesmanPage = e;
      this.getChoice_Salesman();
    },
    //代理商页数变化
    handleAgenpageChange(e) {
      this.Agenpage = e;
      this.getChoice_Agent();
    },
    //点击搜索销售人员
    seachSalesman() {
      this.Salesmanname = this.S_name;
      this.SalesmanPage = 1;
      this.getChoice_Salesman();
    },
    //代理商点击搜索
    seachAgen() {
      this.Agenname = this.A_name;
      this.Agenpage = 1;
      this.getChoice_Agent(this.sale.id);
    },
    //广告主点击搜索
    seachAd() {
      this.adname = this.ad_name;
      this.advertisersPage = 1;
      this.getChoice_advertisers(this.sale.id);
    },
    getChoice_advertisers(id) {
      var data = {
        name: this.adname,
        page: this.advertisersPage,
        per: 4,
        id: id
      };
      Choice_advertisers(data).then(res => {
        if (res.code == 200) {
          this.advertisersList = res.data.data;
          this.advertisersPage = res.data.current_page;
          this.advertisersTotal = res.data.total;
          this.advertisersList.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });
        }
      });
    },
    //代理商列表
    getChoice_Agent(id) {
      var data = {
        name: this.Agenname,
        page: this.Agenpage,
        per: 4,
        id: id
      };
      Choice_Agent(data).then(res => {
        console.log(res);
        console.log("‘代理商");
        if (res.code == 200) {
          this.AgentList = res.data.data;
          this.Agenpage = res.data.current_page;
          this.Agentotal = res.data.total;
          this.AgentList.forEach(element => {
            element.created_at = SETDATE(element.created_at, true);
          });
        }
      });
    },
    //销售人员列表
    getChoice_Salesman(data) {
      let params = data ? data : {
        name: this.Salesmanname,
        page: this.SalesmanPage,
        per: 4
      };
     
      Choice_Salesman(params).then(res => {
        if (res.code == 200) {
          console.log("销售人员");
          console.log(res);
          this.SalesmanPeople = res.data.data;
          this.SalesmanPage = res.data.current_page;
          this.SalesmanTotal = res.data.total;
        }
      });
    },
    backpage() {
      this.$router.go(-1);
    },
    settermination() {
      this.termination = !this.termination;
    },
    setpause() {
      this.pause = !this.pause;
    },
    setrefund(type) {
      if (type == "open") {
        GET_CONTRACT_BACK_MONEY({}).then(res => {
          if (res.code == 200) {
            this.refundTypeData = res.data;
          }
        });
      }
      this.refund = !this.refund;
    },
    refundSuccess(response, file, fileList) {
      let arr = [];
      fileList.forEach(element => {
        arr.push(element.response.data.path);
      });
      this.refundTypeList.fileList = arr;
    },
    setgetmoney() {
      this.moneyType = null;
      this.showMoney = !this.showMoney;
    },
    closeSetMoney() {
      this.showMoney = !this.showMoney;
    },
    setproduct() {
      this.product = !this.product;
    },
    //添加资源
    setselectresource(type) {
      if (type == "open") {
        getmediaINFO({}).then(res => {
          if (res.code == 200) {
            this.MEIJIE = res.data.mediums;
            this.toAddResource = null;
            this.showAddSource = true;
          }
        });
      }
    },
    closeAddSource() {
      this.showAddSource = false;
    },

    //改变销售弹框
    setmarket() {
      this.market = !this.market;
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    setDLS() {
      this.DLS = !this.DLS;
    },
    setGGZ() {
      this.GGZ = !this.GGZ;
    },
    back() {
      this.$router.back();
    },
    addNewContract() {
      if (this.contract_signTime == "") {
        this.$message.error("请选择签订时间");
      } else if (this.sale == {}) {
        this.$message.error("请选择销售人员");
      } else if (this.Agent == {}) {
        this.$message.error("请选择代理商");
      } else if (this.name == "") {
        this.$message.error("请填写合同号");
      } else if (this.priod == []) {
        this.$message.error("请选择投放周期");
      } else if ((this.contract_money == "")) {
        this.$message.error("请填写合同额");
      } else if (this.tableDataRont.resourceListData == []) {
        this.$message.error("请添加资源");
      } else if (this.tableDataRont.moneyListData == []) {
        this.$message.error("请添加回款计划");
      } else {
        let data = {
              file_path: this.fileList.join(','),
              code: this.code,
              date: moment(this.contract_signTime).unix(),
              sale_id: this.sale.id,
              name: this.name,
              agent_id: this.Agent.id,
              industry_id: this.industry_id,
              brand: this.band,
              media_up_id: this.advertisers.id,
              contact_num: this.contact_num,
              money: this.contract_money,
              cycle: JSON.stringify({
                start_time:moment(this.priod[0]).unix(),
                end_time:moment(this.priod[1]).unix()
              }),
              note: this.note,
              status: this.radio,
              
              type: this.contract_type,
              medium: [],
              product: [],
              fund: []
            };

            this.tableDataRont.resourceListData.forEach((e, i) => {
              let obj = {
                id: e.resource,
                often: e.time,
                second: e.rate,
                expenses: e.coast,
                fees: e.agentCoast,
                remark: e.mark,
                gift: e.checked ? 1 : 0
              };
              data.medium.push(obj);
            });

            this.tableDataRont.moneyListData.forEach((e, i) => {
              let obj = {
                item_status: e.type,
                money: e.money,
                payment_time: e.timeStamp,
                type: 1
              };
              data.fund.push(obj);
            });
            if (this.refundParams != "") {
              let newObj = {
                item_status: this.refundParams.type,
                type: 2,
                money: this.refundParams.money,
                remark: this.refundParams.mark,
                file_path: this.refundParams.fileList.join(','),
                payment_time:moment(this.refundParams.time).unix()
              };
              data.fund.push(newObj);
            }
            addContract(data).then(res => {
              if (res.code == 200) {
                this.$message.success('添加成功')
                this.$router.back()
              }
            });
      }
    },
    comfirmAdd(data) {}
  }
};
</script>
<style lang="scss" scoped>
.close1 {
  cursor: pointer;
}
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.searchlist {
  width: 97%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  .item {
    width: 50%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    .name {
      width: 110px;
    }
    .click {
      color: #169bd5;
    }
  }
  .require {
    width: 100%;
    display: flex;
    margin-top: 30px;
    .name {
      width: 110px;
    }
  }
}
.listitem {
  width: 97%;
  margin: 0 auto;
  margin-top: 30px;
  .headertitles {
    display: flex;
    align-items: center;
    .adds {
      color: #169bd5;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .tablists {
    width: 95%;
    padding-left: 5%;
    margin-top: 20px;
  }
}
.otherfile {
  width: 97%;
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  .filename {
    width: 200px;
  }
}
.btom {
  width: 500px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-bottom: 200px;
}

.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 600px;
  height: 420px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .info {
    display: flex;
    align-items: center;
    width: 90%;
    p {
      width: 90px;
    }
    .topinfo {
      width: 50%;
      align-items: center;
      display: flex;
    }
  }
  .listtab {
    margin: 0 auto;
    // width: 500px;
    width: 90%;
  }
  .getmoney {
    width: 80%;
    margin: 0 auto;
    margin-top: 20px;
    .addsave {
      margin: 0 auto;
      width: 50px;
      margin-top: 30px;
    }
    .addsave1 {
      margin: 0 auto;
      width: 200px;
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.propd {
  z-index: 999;
  // display: none;
  .warpprop1 {
    // background: blue;
    background: #fff;
    margin: 0 auto;
    border-radius: 10px;
    width: 800px;
    padding-bottom: 30px;
    // background: red;
    // overflow: auto;
    // height: 500px;

    // height: 100%;
    .tabslist {
      width: 90%;
      margin: 0 auto;
      .block {
        margin-top: 0;
      }
    }
    .info1 {
      width: 90%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      .inputitem {
        width: 50%;
        display: flex;
        align-items: center;
        .inputname {
          width: 90px;
          margin-left: 20px;
        }
      }
    }
    .saves {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
    }
    .pub {
      width: 90%;
      margin: 0 auto;

      .inputitem {
        width: 70%;
        display: flex;
        align-items: center;
        .inputname {
          width: 160px;
          margin-left: 20px;
        }
        .price {
          height: 100%;
          display: flex;
          align-items: center;
          .other {
            margin-left: 3px;
          }
          .others {
            color: #169bd5;
            margin-left: 20px;
          }
        }
      }
    }
  }
}
</style>